<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>推箱子</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}
	#div1 {
		position: relative;
		margin: 20px auto;
	}
	.pos1 {
		width: 50px;
		height: 50px;
		background: url('images/bg.png');
		float: left;
	}
	.pos2 {
		width: 50px;
		height: 50px;
		background: url('images/wall.jpg') no-repeat;
		background-size: 50px 50px;
		float: left;
	}
	.pos3 {
		width: 50px;
		height: 50px;
		background: url('images/flag.png') no-repeat;
		background-size: 50px 50px;
		float: left;
	}
	.pos0{
		width: 50px;
		height: 50px;
		background: url('images/bg.png') no-repeat;
		background-size: 50px 50px;
		float: left;
	}
	.box {
		width: 50px;
		height: 50px;
		background: url('images/box.png') no-repeat;
		background-size: 50px 50px;
		position: absolute;
	}
	.person {
		width: 50px;
		height: 50px;
		background: url('images/1.png') no-repeat;
		background-size: 48px 48px;
		position: absolute;
	}
</style>
<script src="jquery.min.js"></script>
<body>
	<div id="div1"></div>

	<script src="index.js"></script>
</body>
</html>